<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../../resources/static/dist/jquery/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../../../../resources/static/css/competitionPage.css">
    <link rel="stylesheet" href="../../../../resources/static/dist/bootstrap/css/bootstrap.css">
    <script src="../../../../resources/static/dist/bootstrap/js/bootstrap.js"></script>

</head>
<body>
<div id="upPart">
    <div id="upPartInfo">
        <div id="logo"><img src="../../../../resources/static/images/jkf/logo-white.png" alt=""></div>
        <div id="logoDescribe"><h1><span>hello</span>&nbsp;竞赛</h1></div>
        <p id="describe">快来参加每周Hello竞赛，来提升你的段位</p>
    </div>
</div>
<div id="competitionEntrance">
    <input type="text" value="2" style="display: none">
    <div id="com_Duration">每场竞赛时长为1小时30分钟</div>
    <div id="com_Scene"><h1>第<span>{N}</span>场竞赛</h1></div>
    <div id="com_Date">2020-04-05：10:30 ~ 2020-04-05：12:00</div>
    <div id="com_Day"><img src="../../../../resources/static/images/jkf/day.svg" alt=""><span>添加到日程</span></div>
    <div id="com_Timer"><img src="../../../../resources/static/images/jkf/surface.svg">距离开始时间还有：<span id="timer_span"></span></div>
    <div id="com_Into"><a href="weekContest.html"><img src="../../../../resources/static/images/jkf/getInto.svg" alt=""></a></div>
    <!--<h2 class="monday">成绩汇总中</h2>-->
    <!--<h3 class="monday">敬请期待下一场周赛</h3>-->
</div>
<div id="lowerPartBackColor">
    <div id="lowerPart">
        <div id="rankAndReview">
            <div id="ranking">
                <div class="heading">
                    上期比赛排名(前十名)
                </div>
                <table class="contest-base" style="width: 100%">
                    <thead>
                    <tr class="reactable-column-header">
                        <th class="userName" role="button" tabindex="0">
                            <strong>用户名</strong>
                        </th>
                        <th class="useTime" role="button" tabindex="0">
                            <strong>用时</strong>
                        </th>
                        <th class="getCode" role="button" tabindex="0">
                            <strong>得分</strong>
                        </th>
                    </tr>
                    </thead>

                    <tbody>

                    </tbody>

                </table>
            </div>
            <div id="pastPeriod">
                <div class="heading">
                    往期竞赛回顾
                </div>
                <table class="contest-base" style="width: 100%">
                    <thead>
                    <tr class="reactable-column-header">
                        <th class="reactable-th-contest reactable-header-sortable " role="button" tabindex="0">
                        <strong>以往竞赛</strong>
                        </th>
                        <th class="reactable-th-contest_duration reactable-header-sortable reactable-header-sort-asc" role="button" tabindex="0">
                        <strong>时长</strong>
                        </th>
                    </tr>
                    </thead>
                    <tbody class="reactable-data">
                    <tr>
                        <td class="table-field contest-title" value="1">
                            <a href="#">
                                <div class="title">第value场竞赛</div>
                                <div class="date">比赛开始日期，10：30</div>
                            </a>
                        </td>
                        <td class="table-field contest-duration">
                            <div class="timing" style="overflow: hidden">
                                <div class="begin">
                                    <button type="button" id="goRunContest" data-toggle="modal" data-target="#myModal" class="btn btn-info" >开始</button>
                                </div>
                                1 小时 30 分
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" style="text-align: center">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <a type="button" class="btn btn-primary" href="./runContest.html">Save changes</a>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../../../resources/static/js/time.js"></script>
</html>